<link rel="stylesheet" href="../src/css/pages/materialCopy.css">
<div id="viewsWrapper">
    <div id="view1" class="pt-page">
        <div class="fmp-container materialCopy" style="background-color:#f4f4f4;box-shadow: inherit;">
            <!--<div class="container-fluid">-->
            <div class="layout layout-left">
                <div class="header">{{i18n-adTarget}}</div>
                <div class="body">
                    <div class="body-wrapper">
                        <label>{{i18n-Feed}} : </label>
                        <span name="feed-name"></span>
                        <input name="feed-name" type="hidden" class="form-input" value="" disabled />
                    </div>
                    <div class="body-wrapper">
                        <label>{{i18n-adType}} : </label>
                        <span name="feed-style" ></span>
                        <input name="feed-style" type="hidden" class="form-input" disabled value="" />
                    </div>
                    <div class="body-wrapper" style="height: 35px;border-bottom: 1px solid #e0e0e0;">
                        <label>{{i18n-adTarget}} : </label>
                        <span name="inline-drop"></span>
                        <div class="ndp-drop-wrapper" name="inline-drop-1" style="display:none;"></div>
                        <div class="ndp-drop-wrapper" name="inline-drop-2" style="display:none;"></div>
                    </div>
                    <div class="body-wrapper">
                        <p>{{i18n-adPlacement}}</p>
                        <select class="js-example-basic-multiple js-states form-control" name="place-select2" multiple="multiple"></select>
                    </div>
                </div>
            </div>
            <div class="layout layout-center-hidden"></div>
            <div class="layout layout-center">
                <div class="header">{{i18n-creativeProduction}}</div>
                <div class="body">
                    <div class="body-wrapper">
                        <p>{{i18n-majorCreativeElements}}</p>
                        <div class="swap">
                            <input name="main-element"  id="majorElement" type="text" class="form-input" type-a="1" value="Stylewe-china" disabled="disabled" />
                            <button type="button" data-who="1" class="btn-select">{{i18n-select}}</button>
                            <div class="element-num" style="visibility: hidden;">
                                n &nbsp;=&nbsp;
                                <input type="text" name="fillValue"  id="majorFill" >
                            </div>
                        </div>
                    </div>
                    <div class="step2-swich-warpper">
                        <div class="step2-swich-line"></div>
                        <div class="step2-swich-btn-div" data-swap="1">
                            <i class="fa fa-exchange" data-swap-flag="false"></i>
                        </div>
                    </div>
                    <div class="body-wrapper">
                        <p>{{i18n-secondaryCreativeElements}}</p>
                        <div class="swap">
                            <input name="lesser-element" type="text"  id="minorElement" class="form-input" type-a="-1" value="" disabled="disabled" />
                            <button type="button" data-who="-1" class="btn-select">{{i18n-select}}</button>
                            <div class="element-num" style="visibility: hidden;">
                                n &nbsp;=&nbsp;
                                <input type="text" name="fillValue"  id="minorFill">
                            </div>
                        </div>
                    </div>
                    <button name="saveCreative" type="button" class="btn btn-primary btn-sm" style="width: 100px;">{{i18n-generateCreativity}}</button>
                </div>
            </div>
            <div class="layout layout-right ">
                <div class="body">
                    <div class="preview">
                        <div class="switch-preview">
                            <div>
                                <a href="javascript:void(0)" data-type="desktopfeed">
                                    <span class="preview-icon"><i class="font-icon font-icon-pc" aria-hidden="true"></i> </span>
                                </a>
                            </div>
                            <div>
                                <a href="javascript:void(0)" data-type="mobilefeed">
                                    <span class="preview-icon"><i class="font-icon font-icon-iphone" aria-hidden="true"></i> </span>
                                </a>
                            </div>
                            <div>
                                <a href="javascript:void(0)" data-type="rightcolumn">
                                    <span class="preview-icon"><i class="font-icon font-icon-banner" aria-hidden="true"></i> </span>
                                </a>
                            </div>
                            <div>
                                <a href="javascript:void(0)" data-type="mobileexternal">
                                    <span class="preview-icon"><i class="font-icon font-icon-facebook" aria-hidden="true"></i> </span>
                                </a>
                            </div>
                            <div>
                                <a href="javascript:void(0)" data-type="instagramstream">
                                    <span class="preview-icon"><i class="font-icon font-icon-instagram" aria-hidden="true"></i> </span>
                                </a>
                            </div>
                        </div>
                        <div class="ad-preview">
                        </div>
                        <!--</div>-->
                    </div>
                </div>
                <div class="preview-footer">
                    <div class="pull-left">
                <span class="preview-span">
                    <a href="javascript:void(0)" class="high-edit"><i class="font-icon font-icon-magic"></i> {{i18n-highEdit}}</a>
                </span>
                <span class="preview-span chooseAgain">
                    <a href="javascript:void(0)"><i class="font-icon font-icon-banner"></i> {{i18n-reselection}}</a>
                </span>
                <span class="preview-span">
                    <a href="javascript:void(0)" class="btn-preview"><i class="font-icon font-icon-unused "></i> {{i18n-viewMore}}</a>
                </span>
                    </div>
                    <div class="pull-right">
                        <button type="button" class="btn btn-danger btn-save"><i class="fa fa-floppy-o" aria-hidden="true"></i> {{i18n-save}}</button>
                        <button type="button" class="btn btn-default btn-cancel"> {{i18n-cancel}}</button>
                    </div>
                </div>
            </div>
            <div class="layout layout-bottom hidden">
                <div class="choose-head">
                    <span>{{i18n-toContinue}}</span>
                    <span class="glyphicon glyphicon-remove"></span>
                </div>
                <div id="masonryDom" class="grid">
                </div>
                <div class="choose-hide hidden">{{i18n-loading}}......</div>
                <div class="pull-right" style="border-top: 1px solid #E4E4E4;width: 100%;">
                    <button type="button" class="btn btn-primary btn-choose-save" style="float: right;margin: 15px;">{{i18n-save}}
                    </button>
                </div>
            </div>
        </div>
    </div>

    </div>
    <div id="view2" class="pt-page">
        <!--------------高级编辑------------------>
        <div class="fmp-container">
            <div class="container-fluid container-step2" id="step2-high">
                <div class="layout-left high-layout-left">
                    <header class="step2-title">{{i18n-advancedEdit}}</header>

                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-default focus btn-step2-high" data-which="1">{{i18n-style}}</button>
                        <button type="button" class="btn btn-default btn-step2-high" data-which="2">{{i18n-color}}</button>
                    </div>
                    <article class="margin-top20">
                        <div>
                            <div id="bg-div">
                                <div class="element-group-style"></div>
                                <div class="element-img-container margin-top20">
                                    <div class="high-rond" data-color="xffffff">
                                        <div class="high-load xffffff"></div>
                                    </div>
                                    <div class="high-rond" data-color="xae895f">
                                        <div class="high-load xae895f"></div>
                                    </div>
                                    <div class="high-rond" data-color="xdc0a42">
                                        <div class="high-load xdc0a42"></div>
                                    </div>
                                    <div class="high-rond" data-color="x000000">
                                        <div class="high-load x000000"></div>
                                    </div>
                                    <div class="high-rond" data-color="x999999">
                                        <div class="high-load x999999"></div>
                                    </div>
                                    <div class="color-box" bg="bg" style="margin-top:8px;"></div>
                                    <div class="col-xs-3 high-color-val" style="margin-right:0px;margin-top:8px;">
                                        <input type="text" class="form-control">
                                        <span class="color-unit-position">#</span>
                                    </div>
                                </div>
                            </div>
                            <div class="margin-top20">
                                <div class="element-group-style">{{i18n-creativeEle}}</div>
                                <div id="high-ele-style">
                                    <div class="element-img-container main-ele-container">
                                        <ul>
                                        </ul>
                                    </div>
                                    <div class="element-img-container second-ele-container">
                                        <ul>
                                        </ul>
                                    </div>
                                </div>
                                <div id="high-ele-color" class="hidden">
                                    <div class="element-img-container main-ele-container">
                                        <ul>
                                        </ul>
                                    </div>
                                    <div class="element-img-container second-ele-container">
                                        <ul>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="element-style-related">
                                <input type="checkbox"  id="ele-associate" class="form-input" checked>
                                <label for="ele-associate">
                                    <span class="checkbox-mark"></span><span class="checkbox-mark-word">{{i18n-eleAssociate1}}</span>
                                </label>
                            </div>
                            <div class="margin-top30" id="element-bg">
                                <div class="element-group-style">{{i18n-elementBg}}</div>
                                <div class="row margin-top20" style="margin-left:0px;">
                                    <div class="high-ele-val">{{i18n-main}}：</div>
                                    <div class="color-box colpick-not"></div>
                                    <div class="col-xs-3 high-color-val">

                                        <input type="text" class="form-control" disabled="disabled">
                                        <span class="color-unit-position">#</span>
                                    </div>
                                    <div class="high-ele-val">{{i18n-join}}：</div>
                                    <div class="color-box colpick-not"></div>
                                    <div class="col-xs-3 high-color-val">

                                        <input type="text" class="form-control" disabled="disabled">
                                        <span class="color-unit-position">#</span>
                                    </div>
                                </div>
                            </div>
                            <div class="margin-top30" id="element-font">
                                <div class="element-group-style">{{i18n-font}}</div>
                                <div class="row margin-top20" style="margin-left:0px;">
                                    <div class="high-ele-val">{{i18n-main}}：</div>
                                    <div class="color-box colpick-not"></div>
                                    <div class="col-xs-3 high-color-val">

                                        <input type="text" class="form-control" disabled="disabled">
                                        <span class="color-unit-position">#</span>
                                    </div>
                                    <div class="high-ele-val">{{i18n-join}}：</div>
                                    <div class="color-box colpick-not"></div>
                                    <div class="col-xs-3 high-color-val">

                                        <input type="text" class="form-control" disabled="disabled">
                                        <span class="color-unit-position">#</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="margin-top20">
                            <button class="btn btn-default btn-high-generte" type="submit">{{i18n-generateIdeas}}</button>
                        </div>
                    </article>
                    <div class="high-edit-reset"><span class="font-icon font-icon-recycle"></span>{{i18n-reset}}</div>
                </div>
                <div class="layout-right1 high-layout-right">
                    <header class="step2-layout-right-title">{{i18n-creativePreview}} <button class="close high-close1" aria-label="Close" type="button">
                        <img src="./imgs/close.png" />
                    </button></header>
                    <div class="container-fluid high-right-container" style="height:680px;">
                    </div>
                    <footer class="layout-right-footer">
                        <button class="btn btn-primary btn-sm pull-right high-btn-next">{{i18n-next}}&nbsp;→ </button>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" role="dialog" id="create-material-dialog"></div>
<div class="modal fade" role="dialog" id="create-material-save-dialog"></div>
